/* eslint no-unused-vars:0 */
import React from 'react';
import 'antd/dist/antd.css';
import './index.less';
import { Menu, Col, Row, Icon, Input, Select, Button, Table } from 'antd';
import PageComponent from './pageComponent.jsx';
import { Link } from 'react-router-dom';

const Search = Input.Search;
const Option = Select.Option;

export default class EmergencyPlan extends React.Component {
    //点击翻页
    pageClick(pageNum) {
        var _this = this; //如果不定义就会出现作用域的问题this.setState不是一个函数
        if (pageNum != _this.state.current) {
            _this.state.current = pageNum;
        }

        _this.state.indexList = []; //清空之前的数据

        let temp = {
            // this.state.search.type,this.state.search.level
            type: _this.state.searchTypeInput,
            level: _this.state.searchLevelInput,
            pageSize: _this.state.pageSize,
            pageNum: _this.state.current - 1,
            history: _this.state.searchdealStatusInput
        };

        console.log(_this.state.searchTypeInput);
        console.log(_this.state.searchLevelInput);
        console.log(temp);
        this.$get('/risk/findRisks', temp)
            .then((res) => {
                console.log(res);
                if (res) {
                    ///
                    _this.setState({ totalData: res.pages.content });
                    _this.setState({ totalNum: res.pages.totalElements });
                    //计算总页数= 总记录数 / 每页显示的条数
                    let totalPage = Math.ceil(
                        _this.state.totalNum / _this.state.pageSize
                    );
                    _this.setState({ totalPage: totalPage });

                    _this.state.indexList = []; //清空之前的数据
                    for (var i = 0; i < _this.state.pageSize; i++) {
                        if (_this.state.totalData[i]) {
                            _this.state.indexList.push(
                                _this.state.totalData[i]
                            );
                        }
                    }
                    _this.setState({
                        indexList: _this.state.indexList
                    });
                }
            })
            .catch((e) => {
                console.log('error');
            });
    }

    //上一步
    goPrevClick() {
        var _this = this;
        let cur = this.state.current;
        if (cur > 1) {
            _this.pageClick(cur - 1);
        }
    }

    //下一步
    goNext() {
        var _this = this;
        let cur = _this.state.current;
        //alert(cur+"==="+_this.state.totalPage)
        if (cur < _this.state.totalPage) {
            _this.pageClick(cur + 1);
        }
    }

    // 跳转到指定页
    goSwitchChange(e) {
        var _this = this;
        _this.setState({ goValue: e.target.value });
        var value = e.target.value;
        // alert(value+"==="+_this.state.totalPage)
        if (!/^[1-9]\d*$/.test(value)) {
            alert('页码只能输入大于1的正整数');
        } else if (parseInt(value) > parseInt(_this.state.totalPage)) {
            alert('没有这么多页');
        } else {
            _this.pageClick(value);
        }
    }

    getAllRiskLevels() {
        this.$get('/risk/findAllRiskLevels')
            .then((res) => {
                this.setState({
                    riskLevels: res.riskLevels || []
                });
            })
            .catch((e) => {
                console.log(e);
            });
    }

    getAllRiskTypes() {
        this.$get('/risk/findAllRiskTypes')
            .then((res) => {
                this.setState({
                    riskTypes: res.riskTypes
                });
            })
            .catch((e) => {
                console.log(e);
            });
    }

    handleChange(param, value) {
        if (value) {
            this.state.search[param] = value.label;
            this.forceUpdate();
        } else {
            this.state.search[param] = '';
            this.forceUpdate();
        }
    }

    handleChangeLevel(e) {
        if (e) {
            this.setState({
                searchLevelInput: e.label
            });
        } else {
            this.setState({
                searchLevelInput: ''
            });
        }
    }

    handleChangeType(e) {
        if (e) {
            this.setState({
                searchTypeInput: e.label
            });
        } else {
            this.setState({
                searchTypeInput: ''
            });
        }
    }
    handleChangedealStatus(e) {
        if (e) {
            this.setState({
                searchdealStatusInput: e.label
            });
        } else {
            this.setState({
                searchdealStatusInput: ''
            });
        }
    }
    handleClickForSearch() {
        // this.getList(this.state.search.type,this.state.search.level);
        this.pageClick(1);
    }

    componentWillMount() {
        this.getAllRiskLevels();
        this.getAllRiskTypes();
        this.pageClick(1);
    }

    state = {
        indexList: [], // 获取数据的存放数组
        totalNum: '', // 总记录数
        totalData: [],
        current: 1, //当前页码
        pageSize: 5, //每页显示的条数5条
        goValue: '',
        totalPage: '', //总页数
        searchTypeInput: '',
        searchLevelInput: '',
        searchdealStatusInput: '未处理的',
        data: [],
        columns: [
            {
                title: '风险种类',
                dataIndex: 'riskType.type',
                width: 200,
                render: (text, record) => (
                    <span
                        className={
                            record.riskLevel.level == '特重'
                                ? 'tableColRed'
                                : record.riskLevel.level == '较重'
                                ? 'tableColOrange'
                                : record.riskLevel.level == '较强'
                                ? 'tableColYellow'
                                : 'tableColBlue'
                        }>
                        {text}
                    </span>
                )
            },
            {
                title: '预警级别',
                dataIndex: 'riskLevel.level',
                width: 150,
                render: (text) => (
                    <span
                        className={
                            text == '特重'
                                ? 'tableColRed'
                                : text == '较重'
                                ? 'tableColOrange'
                                : text == '较强'
                                ? 'tableColYellow'
                                : 'tableColBlue'
                        }>
                        {text}
                    </span>
                )
            },
            {
                title: '内容',
                dataIndex: 'title',
                width: 400,
                render: (text, record) => (
                    <a
                        href={record.url}
                        target="_blank"
                        rel="noopener noreferrer">
                        {record.title}
                    </a>
                )
            },
            {
                title: '发生时间',
                dataIndex: 'createTime',
                width: 200,
                render: (text) => <span>{this.$changeTimeToString(text)}</span>
            },
            {
                title: '处理状态',
                dataIndex: 'dealStatus.status',
                // <Link to="/admin/RiskAssessment/Solution">解决方案</Link>
                render: (text) => (
                    <Link
                        to="/admin/RiskAssessment/Solution"
                        className={
                            text == '已经处理'
                                ? 'tableColGreen'
                                : text == '暂不处理'
                                ? 'tableColGreen'
                                : 'tableColRed'
                        }>
                        {text}
                    </Link>
                )
            }
        ],

        riskTypes: [{ id: '123' }, { type: '空,请稍后访问' }],
        riskLevels: [{ id: '123' }, { level: '空,请稍后访问' }],
        dealStatus: [
            { id: 123 },
            { status: '未处理的' },
            { id: 456 },
            { status: '已经处理' }
        ]
    };

    render() {
        return (
            <div className="body">
                <Row className="row1">
                    {/*<Col span="2">
                        <Row className="sub-row1">预警查询:</Row>
                    </Col>*/}
                    <Col span="22">
                        <Row className="sub-row2">
                            预警查询:&nbsp;&nbsp;&nbsp;
                            <Select
                                className="sub-row2-select"
                                labelInValue
                                defaultValue={{ key: '请选择风险类型' }}
                                style={{ width: 200, height: 30 }}
                                onChange={this.handleChangeType.bind(this)}
                                allowClear>
                                {this.state.riskTypes.map((item) => {
                                    return (
                                        <Option key={item.id} value={item.id}>
                                            {item.type}
                                        </Option>
                                    );
                                })}
                            </Select>
                            <Select
                                className="sub-row2-select"
                                labelInValue
                                defaultValue={{ key: '请选择预警级别' }}
                                style={{ width: 200, height: 30 }}
                                onChange={this.handleChangeLevel.bind(this)}
                                allowClear>
                                {this.state.riskLevels.map((item) => {
                                    return (
                                        <Option key={item.id} value={item.id}>
                                            {item.level}
                                        </Option>
                                    );
                                })}
                            </Select>
                            <Select
                                className="sub-row2-select"
                                labelInValue
                                defaultValue={{ key: '未处理的' }}
                                style={{ width: 200, height: 30 }}
                                onChange={this.handleChangedealStatus.bind(
                                    this
                                )}
                                allowClear>
                                {this.state.dealStatus.map((item) => {
                                    return (
                                        <Option
                                            key={item.id}
                                            value={item.status}>
                                            {item.status}
                                        </Option>
                                    );
                                })}
                            </Select>
                            <Button
                                type="primary"
                                icon="search"
                                onClick={this.handleClickForSearch.bind(this)}>
                                查询
                            </Button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </Row>
                    </Col>
                </Row>
                <br />
                <Row className="sub-row2">
                    <Table
                        className="emergency-table"
                        columns={this.state.columns}
                        dataSource={this.state.totalData}
                        pagination={false}
                    />
                    <div style={{ float: 'right' }}>
                        <PageComponent
                            total={this.state.totalNum}
                            current={this.state.current}
                            totalPage={this.state.totalPage}
                            goValue={this.state.goValue}
                            pageClick={this.pageClick.bind(this)}
                            goPrev={this.goPrevClick.bind(this)}
                            goNext={this.goNext.bind(this)}
                            switchChange={this.goSwitchChange.bind(this)}
                        />
                    </div>
                </Row>
            </div>
        );
    }
}
